<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提交信息规范指南</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --success-color: #27ae60;
            --danger-color: #e74c3c;
            --warning-color: #f39c12;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --border-radius: 8px;
            --transition: all 0.3s ease;
            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--dark-color);
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1100px;
            margin: 0 auto;
        }
        
        header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 40px;
            border-radius: var(--border-radius);
            text-align: center;
            margin-bottom: 30px;
            box-shadow: var(--box-shadow);
            animation: fadeInDown 0.8s ease;
            position: relative;
            overflow: hidden;
        }
        
        header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,197.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
            background-size: cover;
            background-position: center;
        }
        
        header h1, header p {
            position: relative;
            z-index: 1;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 15px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .content-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }
        
        .card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 25px;
            transition: var(--transition);
            animation: fadeInUp 0.8s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }
        
        .card h2 {
            color: var(--secondary-color);
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--primary-color);
            display: flex;
            align-items: center;
        }
        
        .card h2 i {
            margin-right: 10px;
            font-size: 1.4em;
        }
        
        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            border-radius: var(--border-radius);
            padding: 18px;
            margin: 15px 0;
            overflow-x: auto;
            font-family: 'Courier New', Courier, monospace;
            font-size: 14px;
            line-height: 1.5;
            position: relative;
            transition: var(--transition);
        }
        
        .code-block:hover {
            transform: scale(1.01);
        }
        
        .copy-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 12px;
            transition: var(--transition);
        }
        
        .copy-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        .copy-btn.copied {
            background: var(--success-color);
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }
        
        th {
            background: var(--primary-color);
            color: white;
            padding: 12px 15px;
            text-align: left;
            font-weight: 600;
        }
        
        td {
            padding: 12px 15px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        tr {
            transition: var(--transition);
        }
        
        tr:hover {
            background: #f7fafc;
        }
        
        .type-tag {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            margin-right: 8px;
            transition: var(--transition);
            cursor: pointer;
        }
        
        .type-tag:hover {
            transform: scale(1.05);
        }
        
        .type-feat { background: var(--success-color); color: white; }
        .type-fix { background: var(--danger-color); color: white; }
        .type-docs { background: #3498db; color: white; }
        .type-style { background: #6c757d; color: white; }
        .type-refactor { background: var(--warning-color); color: #212529; }
        .type-test { background: #9b59b6; color: white; }
        .type-chore { background: #34495e; color: white; }
        .type-perf { background: #e74c3c; color: white; }
        .type-ci { background: #1abc9c; color: white; }
        
        .example-section {
            margin: 30px 0;
        }
        
        .example-tabs {
            display: flex;
            border-bottom: 1px solid #e2e8f0;
            margin-bottom: 15px;
        }
        
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            transition: var(--transition);
            border-bottom: 3px solid transparent;
        }
        
        .tab.active {
            border-bottom: 3px solid var(--primary-color);
            color: var(--primary-color);
            font-weight: 600;
        }
        
        .tab-content {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .tool-section {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 25px;
            margin-top: 30px;
        }
        
        .tool-list {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 15px;
        }
        
        .tool-item {
            background: var(--light-color);
            border-radius: var(--border-radius);
            padding: 15px;
            flex: 1;
            min-width: 200px;
            text-align: center;
            transition: var(--transition);
            cursor: pointer;
            position: relative;
            user-select: none;
        }
        
        .tool-item:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-3px);
        }
        
        .tool-copy-indicator {
            position: absolute;
            top: -10px;
            right: -10px;
            background: var(--success-color);
            color: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            opacity: 0;
            transition: var(--transition);
        }
        
        .tool-item.copied .tool-copy-indicator {
            opacity: 1;
        }
        
        footer {
            text-align: center;
            padding: 30px;
            margin-top: 40px;
            color: #6a737d;
            font-size: 0.9rem;
        }
        
        .floating-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: var(--primary-color);
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--box-shadow);
            cursor: pointer;
            transition: var(--transition);
            z-index: 100;
        }
        
        .floating-btn:hover {
            transform: scale(1.1);
            background: var(--secondary-color);
        }
        
        .copy-message {
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--success-color);
            color: white;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            z-index: 1000;
            opacity: 0;
            transform: translateY(-20px);
            transition: var(--transition);
        }
        
        .copy-message.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        @media (max-width: 768px) {
            .content-grid {
                grid-template-columns: 1fr;
            }
            
            header {
                padding: 25px;
            }
            
            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>提交信息规范指南</h1>
            <p class="subtitle">统一团队协作规范，提高代码库可维护性</p>
        </header>
        
        <div class="content-grid">
            <div class="card">
                <h2><i>📝</i> 基本格式</h2>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    <pre>类型(范围): 简短描述

详细描述（可选）

关联Issue: #123</pre>
                </div>
                <p>遵循这个基本格式可以确保提交信息的清晰和一致性。</p>
            </div>
            
            <div class="card">
                <h2><i>🏷️</i> 类型说明</h2>
                <table>
                    <thead>
                        <tr>
                            <th>类型</th>
                            <th>说明</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><span class="type-tag type-feat">feat</span></td>
                            <td>新功能</td>
                            <td>feat(display): 添加OLED滚动显示功能</td>
                        </tr>
                        <tr>
                            <td><span class="type-tag type-fix">fix</span></td>
                            <td>修复bug</td>
                            <td>fix(bluetooth): 修复连接超时问题</td>
                        </tr>
                        <tr>
                            <td><span class="type-tag type-docs">docs</span></td>
                            <td>文档更新</td>
                            <td>docs(readme): 更新硬件规格说明</td>
                        </tr>
                        <tr>
                            <td><span class="type-tag type-style">style</span></td>
                            <td>代码格式调整</td>
                            <td>style(code): 统一代码缩进格式</td>
                        </tr>
                        <tr>
                            <td><span class="type-tag type-refactor">refactor</span></td>
                            <td>重构代码</td>
                            <td>refactor(menu): 优化菜单导航结构</td>
                        </tr>
                        <tr>
                            <td><span class="type-tag type-test">test</span></td>
                            <td>测试相关</td>
                            <td>test(power): 添加电源管理单元测试</td>
                        </tr>
                        <tr>
                            <td><span class="type-tag type-chore">chore</span></td>
                            <td>构建工具变动</td>
                            <td>chore(build): 更新编译脚本配置</td>
                        </tr>
                        <tr>
                            <td><span class="type-tag type-perf">perf</span></td>
                            <td>性能优化</td>
                            <td>perf(render): 优化屏幕刷新性能</td>
                        </tr>
                        <tr>
                            <td><span class="type-tag type-ci">ci</span></td>
                            <td>CI/CD配置</td>
                            <td>ci(github): 添加自动构建工作流</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="card">
                <h2><i>🎯</i> 范围说明</h2>
                <p>范围应该明确标识修改的模块或组件：</p>
                <ul style="margin: 15px 0; padding-left: 20px;">
                    <li><code>hardware</code> - 硬件设计相关</li>
                    <li><code>firmware</code> - 固件代码相关</li>
                    <li><code>software</code> - 软件/游戏相关</li>
                    <li><code>docs</code> - 文档相关</li>
                    <li><code>build</code> - 构建系统相关</li>
                    <li><code>ci</code> - 持续集成相关</li>
                </ul>
                <p>明确的范围有助于快速定位代码变更。</p>
            </div>
        </div>
        
        <div class="card example-section">
            <h2><i>📋</i> 详细示例</h2>
            
            <div class="example-tabs">
                <div class="tab active" data-tab="feat">新功能开发</div>
                <div class="tab" data-tab="fix">Bug修复</div>
                <div class="tab" data-tab="docs">文档更新</div>
                <div class="tab" data-tab="refactor">重构改进</div>
            </div>
            
            <div class="tab-content active" id="feat">
                <div class="code-block">
                    <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    <pre>feat(hardware): 添加温湿度传感器接口

- 设计SHT30传感器电路连接
- 添加I2C通信协议支持
- 实现温湿度数据读取功能

关联Issue: #15</pre>
                </div>
            </div>
            
            <div class="tab-content" id="fix">
                <div class="code-block">
                    <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    <pre>fix(firmware): 修复OLED显示乱码问题

- 修正字符编码处理逻辑
- 优化显示缓冲区管理
- 添加字体数据校验

关联Issue: #23</pre>
                </div>
            </div>
            
            <div class="tab-content" id="docs">
                <div class="code-block">
                    <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    <pre>docs(contributing): 完善贡献者指南

- 添加代码审查流程说明
- 更新开发环境配置步骤
- 补充测试要求说明

关联Issue: #8</pre>
                </div>
            </div>
            
            <div class="tab-content" id="refactor">
                <div class="code-block">
                    <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    <pre>refactor(bluetooth): 重构蓝牙通信模块

- 分离协议解析和数据处理
- 优化错误处理机制
- 提高代码可维护性

关联Issue: #31</pre>
                </div>
            </div>
        </div>
        
        <div class="content-grid">
            <div class="card">
                <h2><i>💡</i> 最佳实践</h2>
                <h3>标题规范</h3>
                <ul style="margin: 10px 0 15px 20px;">
                    <li>使用祈使句，现在时态</li>
                    <li>首字母不大写</li>
                    <li>结尾不加句号</li>
                    <li>长度不超过50个字符</li>
                </ul>
                
                <h3>正文规范</h3>
                <ul style="margin: 10px 0 15px 20px;">
                    <li>每行不超过72个字符</li>
                    <li>使用列表说明具体变更</li>
                    <li>解释为什么要做这个变更</li>
                    <li>说明与之前行为的对比</li>
                </ul>
                
                <h3>关联Issue</h3>
                <ul style="margin: 10px 0 15px 20px;">
                    <li>使用 <code>关联Issue: #编号</code> 格式</li>
                    <li>多个Issue用逗号分隔</li>
                    <li>如果是修复，可以使用 <code>Fixes #编号</code> 自动关闭Issue</li>
                </ul>
            </div>
            
            <div class="card">
                <h2><i>🚫</i> 避免的写法</h2>
                
                <h3>不好的示例</h3>
                <div class="code-block" style="background: #fed7d7; color: #742a2a;">
                    <pre>更新了一些东西</pre>
                </div>
                <div class="code-block" style="background: #fed7d7; color: #742a2a;">
                    <pre>修复bug</pre>
                </div>
                <div class="code-block" style="background: #fed7d7; color: #742a2a;">
                    <pre>又改了点代码</pre>
                </div>
                
                <h3>好的示例</h3>
                <div class="code-block" style="background: #c6f6d5; color: #22543d;">
                    <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    <pre>fix(power): 修复电池电量检测不准确问题

- 校准ADC采样参考电压
- 添加温度补偿算法
- 优化电量百分比计算

关联Issue: #42</pre>
                </div>
            </div>
        </div>
        
        <div class="tool-section">
            <h2><i>🔧</i> 实用工具</h2>
            
            <h3>Git Hook配置</h3>
            <p>可以在 <code>.git/hooks/commit-msg</code> 中添加脚本来验证提交信息格式。</p>
            
            <h3>IDE插件</h3>
            <p>点击插件名称复制到剪贴板：</p>
            <div class="tool-list">
                <div class="tool-item" onclick="copyText(this, 'VSCode: Git Commit Message Template')">
                    <span class="tool-copy-indicator">✓</span>
                    VSCode: Git Commit Message Template
                </div>
                <div class="tool-item" onclick="copyText(this, 'IntelliJ: Git Commit Template')">
                    <span class="tool-copy-indicator">✓</span>
                    IntelliJ: Git Commit Template
                </div>
                <div class="tool-item" onclick="copyText(this, 'Vim: git-commit-plugin')">
                    <span class="tool-copy-indicator">✓</span>
                    Vim: git-commit-plugin
                </div>
            </div>
        </div>
        
        <footer>
            <p>遵循这些规范将提高代码库的可维护性和团队协作效率</p>
        </footer>
    </div>
    
    <div class="floating-btn" id="scrollTopBtn" onclick="scrollToTop()">↑</div>
    <div class="copy-message" id="copyMessage">已成功复制到剪贴板！</div>

    <script>
        // 最简单的复制函数 - 使用最可靠的方法
        function copyText(element, text) {
            // 创建一个临时的textarea元素
            const textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.style.position = 'fixed';
            textArea.style.left = '-999999px';
            textArea.style.top = '-999999px';
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            
            try {
                // 执行复制命令
                const successful = document.execCommand('copy');
                
                if (successful) {
                    // 显示成功反馈
                    showCopyMessage();
                    
                    // 显示元素上的成功指示器
                    if (element) {
                        element.classList.add('copied');
                        setTimeout(() => {
                            element.classList.remove('copied');
                        }, 2000);
                    }
                } else {
                    alert('复制失败，请手动选择文本并复制');
                }
            } catch (err) {
                console.error('复制失败:', err);
                alert('复制失败，请手动选择文本并复制');
            }
            
            // 移除临时元素
            document.body.removeChild(textArea);
        }
        
        // 复制代码块的函数
        function copyCode(button) {
            const codeBlock = button.parentElement;
            const text = codeBlock.querySelector('pre').textContent;
            copyText(button, text);
            
            // 更新按钮状态
            button.textContent = '已复制!';
            button.classList.add('copied');
            setTimeout(() => {
                button.textContent = '复制';
                button.classList.remove('copied');
            }, 2000);
        }
        
        // 显示复制成功消息
        function showCopyMessage() {
            const message = document.getElementById('copyMessage');
            message.classList.add('show');
            setTimeout(() => {
                message.classList.remove('show');
            }, 2000);
        }
        
        // 标签切换功能
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', function() {
                // 移除所有活动标签和内容
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
                
                // 激活当前标签和内容
                this.classList.add('active');
                const tabId = this.getAttribute('data-tab');
                document.getElementById(tabId).classList.add('active');
            });
        });
        
        // 滚动到顶部功能
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
        
        // 显示/隐藏滚动到顶部按钮
        window.addEventListener('scroll', () => {
            const scrollTopBtn = document.getElementById('scrollTopBtn');
            if (window.pageYOffset > 300) {
                scrollTopBtn.style.display = 'flex';
            } else {
                scrollTopBtn.style.display = 'none';
            }
        });
        
        // 卡片动画延迟
        document.querySelectorAll('.card').forEach((card, index) => {
            card.style.animationDelay = `${index * 0.1}s`;
        });
        
        // 类型标签点击效果
        document.querySelectorAll('.type-tag').forEach(tag => {
            tag.addEventListener('click', function() {
                this.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    this.style.transform = 'scale(1.05)';
                }, 100);
            });
        });
    </script>
</body>
</html>